<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
</head>

<body>

    <ul>
        <li>我是第一个li</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我是最后一个li</li>
    </ul>
    <ol>
    </ol>
    <div class="father">
        <div class="box">
            <span class="erweima">s</span>
        </div>
    </div>

    <script>
        var erweima = document.querySelector('.erweima');
        // <!-- 父节点 -->
        //如果要使用父节点可以直接用parentNode来调用
        //只调用离他最近的那个父节点,如果找不到父节点那就返回为空
        console.log(erweima.parentNode);
        console.log(erweima.parentNode.parentNode);

        //子节点
        //只想获得ul中的li
        var ul = document.querySelector('ul');
        console.log(ul.childNodes); //获得节点数会将文本节点一同算上去，
        // 通常我们用children来调用所有的元素节点
        console.log('我是一个dom元素', ul.children); //这种方法可以直接使用，返回的是一个伪数组

        // 获取第一个元素和最后一个元素,这两种方法只能在IE9以上的浏览器用，但可以用children来调用，他返回的是一个伪数组
        // 获取第一个元素
        console.log(ul.firstElementChild);
        //获取最后一个元素
        console.log(ul.lastElementChild);
        console.log(ul.children[ul.children.length - 1]); //获取最后一个元素

        //兄弟节点nextsibling获取自己的兄弟节点
        // previoussibling获得的是上一个兄弟节点
        // 这两个包含了文本节点等节点，但是没有浏览器版本的兼容问题
        // 用nextElementsibling或previousElementsibling 可以来获得元素标签,这两种方法也只使用与IE9以上版本
        console.log(ul.nextElementSibling);

        // 创建添加节点
        var li = document.createElement('li'); //创建
        var ol = document.querySelector('ol');
        ol.appendChild(li); //这里的li不用添加上'', 添加的元素是在后面追加元素
        //insertBefore(child,指定元素)，将创建的元素放在指定元素的前面
        var lili = document.createElement('li');
        ol.insertBefore(lili, ol.children[0]);
        //删除节点node.removeChild(child);node必须是父亲节点
        // ul.removeChild(ul.children[0]); //实现了将第一个节点删除的功能
        // 复制节点
        // node.cloneNode();如果cloneNode（）中没有为false或者为空（浅拷贝），则只复制标签，不复制内容，想要复制内容要在里面加上TRUE（深拷贝）
        var lii = ul.children[0].cloneNode(true);
        ul.appendChild(lii);
        // 通过classList 来修改类名
        /*
            ol.classList.add()	是添加类名
            ol.classList.remove()  是移除类名
            ol.classList.toggle()  是切换类名 ，如果有当前类名就移除，如果没有就加上
       */

    </script>
</body>

</html>
